<!DOCTYPE html>
<html ng-app="sample-app" id="ng-app" class="js">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular directive: lazy image directive, inspired by TIF</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- look inside this css to see how container and ratios work -->
    <link rel="stylesheet" type="text/css" href="lazy-image-style.css" />
    <!-- only for our sample demo app -->
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    
</head>
<body ng-controller="appCtrl" >

<div class="demo-wrapper">

	<h1>Angular lazy image directive</h1>

	<p>Directive for loading responsive image when container (which is preventing reflow) is in viewport. Available as a bower and npm component. This module was made while working on the KLM <a href="https://www.klm.com/destinations/nl/en/search">travel inspiration finder</a> as a test to contribute to Open Source, see <a href="https://github.com/afklm/ng-lazy-image">Github</a> for our source. We would like to thank Sandra Maas for making this possible. Resize, reload and scroll to see what gets actually loaded and when. Below you will find more examples.</p>

	<h2>Example</h2>

	<!-- This container is used for e2e tests, don't change urls -->
    <div afkl-lazy-image="//placehold.it/480x320/00a1de/ffffff 480w, //placehold.it/768x512/00a1de/ffffff 768w, //placehold.it/936x624/00a1de/ffffff" class="afkl-lazy-wrapper afkl-img-ratio-3-2 demo-image demo-e2e-image"></div>

    <p>Example showing another aspect ratio. The parent container always sets the max width available for the image to align.</p>

    <div afkl-lazy-image="//placehold.it/480x480 480w, //placehold.it/768x768 768w, //placehold.it/936x936 2x" class="afkl-lazy-wrapper afkl-img-ratio-1-1 demo-image"></div>


    <h3>Option to use aspect ratio's</h3>
    <p>Browser reflow is bad, especially when lazy loading images. The container aspect ratio setup sets the correct image container height (so no total repainting takes place when image is appended) based on it's css class which uses aspect-ratio. If you want different aspect ratio's for different srcset setup then introduce your own classnames.</p>

	<ul class="demo-aspect">
		<li class="demo-aspect-ratio"><div class="afkl-lazy-wrapper afkl-img-ratio-4-2">.afkl-img-ratio-4-2</div></li>
		<li class="demo-aspect-ratio"><div class="afkl-lazy-wrapper afkl-img-ratio-16-9">.afkl-img-ratio-16-9</div></li>
		<li class="demo-aspect-ratio"><div class="afkl-lazy-wrapper afkl-img-ratio-3-2">.afkl-img-ratio-3-2</div></li>
		<li class="demo-aspect-ratio demo-aspect-last"><div class="afkl-lazy-wrapper afkl-img-ratio-4-3">.afkl-img-ratio-4-3</div></li>
	</ul>
	<ul class="demo-aspect">
		<li class="demo-aspect-ratio"><div class="afkl-lazy-wrapper afkl-img-ratio-3-4">.afkl-img-ratio-3-4</div></li>
		<li class="demo-aspect-ratio"><div class="afkl-lazy-wrapper afkl-img-ratio-1-1">.afkl-img-ratio-1-1</div></li>
	</ul>


    <h3>Check profiling</h3>
	<!-- example how to use image set using srcset and ratio -->
	<div ng-repeat="image in images">

		<div afkl-lazy-image="{{image.srcset}}" class="afkl-lazy-wrapper afkl-img-ratio-{{image.ratio}}"></div>

	</div>



	<p class="demo-link"><a href="#" ng-click="destroy()">Destroy $scope</a> (no leaks)</p>


	<h3>Examples using the provided options</h3>

	<ul>
		<li><a href="sample-alt-className.html">option: alt, className</a></li>
		<li><a href="sample-no-lazy.html">option: not lazy, own offset</a></li>
		<li><a href="sample-background.html">option: background image</a></li>
		<li><a href="sample-single.html">option: single image for all viewports</a></li>
		<li><a href="sample-scrollable.html">Inside scrollable directive, afkl-image-container</a></li>
	</ul>

	<h3>Specific usecases</h3>

	<ul>
		<li><a href="sample-loaded.html">Done or Fail event for every image directive</a></li>
		<li><a href="sample-repeat.html">Directive inside repeat with filtering</a></li>
		<li><a href="sample-change.html">Change at runtime</a></li>
		<li><a href="sample-top.html">Image top row</a></li>
		<li><a href="sample-hide-show.html">Toggle parent view (css animations or ng-if)</a></li>
		
	</ul>

	<p>Shout our for our Eden devops team: Martijn, Joel and Ramon.</p>

</div>

<!-- only dependency is Angular -->
<script src="vendor/angular.min.js"></script>
<!-- our ng lazy image module -->
<script src="lazy-image.js"></script>

<!-- dummy app kickstarting our module -->
<script src="js/app.js"></script>

</body>
</html>
